<template>
  <view class="page">
    <z-paging ref="paging" v-model="goodsList" @query="queryList">
      <template #top>
        <custom-navbar title="首页" :leftIconSize="0"></custom-navbar>
        <view class="padding-lr-default search-box mb20">
          <up-search
            @search="handleSearch"
            searchIcon="scan"
            placeholder="寻找宝贝"
            :clearabled="true"
            :showAction="false"
            :animation="true"
            v-model="searchValue"
          ></up-search>
        </view>
      </template>
      <up-swiper
        :list="swiperList"
        previousMargin="30"
        nextMargin="30"
        circular
        :autoplay="false"
        radius="5"
        bgColor="#ffffff"
      ></up-swiper>
      <view class="mt20">
        <up-notice-bar
          text="好消息，好消息，好消息，好消息，好消息"
        ></up-notice-bar>
      </view>
      <template #refresher="{ refresherStatus }">
        <custom-refresher :status="refresherStatus" />
      </template>
      <template #loadingMoreNoMore>
        <custom-nomore />
      </template>
      <view class="padding-lr-default">
        <!-- 商品区域 -->
        <goods-list-item :goodsList="goodsList"></goods-list-item>
      </view>

      <up-tabbar
        :value="value1"
        @change="change1"
        :fixed="true"
        :placeholder="false"
        activeColor="#d81e06"
        :safeAreaInsetBottom="false"
      >
        <up-tabbar-item
          text="购物"
          icon="home"
          @click="click1"
        ></up-tabbar-item>
        <up-tabbar-item
          text="美团"
          icon="photo"
          @click="click1"
        ></up-tabbar-item>
        <up-tabbar-item
          text="饿了么"
          icon="play-right"
          @click="click1"
        ></up-tabbar-item>
        <up-tabbar-item
          text="我的"
          icon="account"
          @click="click1"
        ></up-tabbar-item>
      </up-tabbar>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { goodsListApi } from "@/api/index.js";
import swiper3 from "@/static/images/swiper3.png";
import swiper2 from "@/static/images/swiper2.png";
import swiper1 from "@/static/images/swiper1.png";
// swiper
const swiperList = ref([swiper3, swiper2, swiper1]);

const value1 = ref(0);
function click1(e) {
  console.log(e);
}
function change1(e) {
  console.log(e);
}
// 搜索
const searchValue = ref("");
const handleSearch = () => {
  uni.navigateTo({
    url: `/pages/search/index?searchValue=${searchValue.value}`,
  });
};
// 商品列表
const goodsList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
  const params = {
    currentPage: pageNo,
    pageSize: pageSize,
  };
  goodsListApi(params)
    .then((res) => {
      paging.value.complete(res.records);
      // console.log(goodsList.value);
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
onLoad(() => {});
</script>

<style lang="scss" scoped>
.search-box {
  .u-search {
    flex: initial;
  }
}
</style>
